menu
Components / Badges
  • About
  • Contact
  • Legal information

Badge

badge component is an onscreen notification element

Badges on icon

Default
account_box account_box account_box account_box account_box
With colors
account_box account_box account_box account_box
Many sizess
account_box account_box account_box account_box

<!-- Badge number on icon -->
<mdl-icon icon="MaterialDesignLite.TagHelpers.StyleValues.MDLIcon" mdl-badge="1"></mdl-icon>
     
<!-- Badge special char on icon -->
<mdl-icon icon="MaterialDesignLite.TagHelpers.StyleValues.MDLIcon" mdl-badge="♥"></mdl-icon>
       
<!-- Badge color on big icon -->
<mdl-icon icon="MaterialDesignLite.TagHelpers.StyleValues.MDLIcon" 
        icon-size="64" 
        mdl-badge="1" 
        mdl-badge-color="green">
</mdl-icon>
    

Badges on label

Inbox

<!--  Badge on label -->
<span mdl-badge="4">Inbox</span>
<!--  Badge on link -->
<a href="#" mdl-badge="4">Inbox</a>
<!--  Badge on button -->
<span mdl-badge="4">
    <mdl-button>Inbox</mdl-button>
</span>